<template>
  <div>
    <div class="app-container">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="roleId" label="角色id" width="180" />
        <el-table-column prop="roleName" label="角色名称" width="180" />
        <el-table-column prop="introduction" label="用户描述" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleMenuClick(scope.row)">修改角色可操作的菜单</el-button>
            <el-button type="text" size="small" @click="handlePermClick(scope.row)">修改角色访问后台资源的权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="编辑角色可操作的菜单" :visible.sync="MenuChangeVisible" width="30%">
        <el-tree
          ref="menu"
          :data="menuData"
          show-checkbox
          node-key="menuId"
          :default-expanded-keys="[1]"
          :props="defaultProps"
        />
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="changeMenu">确定</el-button>
            <el-button @click="MenuChangeVisible = false">取 消</el-button>
          </span>
        </div>
      </el-dialog>

      <el-dialog title="编辑角色可操作的后台资源" :visible.sync="PermChangeVisible" width="30%">
        <el-tree
          ref="perm"
          :data="resourceData"
          show-checkbox
          node-key="permId"
          :default-expanded-keys="[1]"
          :props="defaultProps1"
        />
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="changePerm">确定</el-button>
            <el-button @click="PermChangeVisible = false">取 消</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getRoleDetail,
  getMenu,
  chageMenu,
  getAllResource,
  chageRoleResource,
} from "@/api/admin";
export default {
  data() {
    return {
      // 角色数据
      tableData: [],

      // 树型菜单的默认参数
      defaultProps: {
        //   显示的标签
        label: "label",
      },

      // 树型菜单的默认参数
      defaultProps1: {
        //   显示的标签
        label: "label",
        // 子属性
        children: "mallPermissions",
      },

      // 所有菜单
      menuData: [],

      // 所有资源
      resourceData: [],

      // 角色已有的菜单
      checkMenu: [],
      // 角色已有的权限
      checkPerm: [],

      menuParams: {
        // 当前的角色id
        roleId: "",
        // 角色选择的菜单
        menuIds: [],
      },

      permParams: {
        // 当前的角色id
        roleId: "",
        // 角色选择的资源
        permIds: [],
      },

      // 控制对话框的显示
      MenuChangeVisible: false,
      PermChangeVisible: false,
    };
  },

  created() {
    this.init();
  },

  methods: {
    // 初始化
    init() {
      getRoleDetail().then((res) => {
        this.tableData = res.data;
      });
      // 获取菜单栏
      getMenu().then((res) => {
        this.menuData = res.data;
      });
      // 获取所有的资源信息
      getAllResource().then((res) => {
        this.resourceData = res.data;
      });
    },

    handleMenuClick(row) {
      this.menuParams.roleId = row.roleId;
      this.MenuChangeVisible = true;
      // 设置展开的节点 添加这个 不能直接调用 等待这个函数渲染完成
      this.$nextTick(() => {
        this.$refs.menu.setCheckedKeys(row.menuIds);
      });
    },

    handlePermClick(row) {
      // this.checkMenu = row.menuIds;
      this.permParams.roleId = row.roleId;
      this.PermChangeVisible = true;

      // 添加这个不能直接调用 等待这个函数渲染完成
      this.$nextTick(() => {
        console.log("需要渲染的权限id" + row.permIds);
        this.$refs.perm.setCheckedKeys(row.permIds);
      });
    },

    // 修改角色菜单
    changeMenu() {
      // 获取选择的菜单 获取到父节点
      this.menuParams.menuIds = this.$refs.menu.getCheckedKeys();
      console.log("获取到的子节点", this.menuParams.menuIds);
      //判断有没有被全选
      var parentIds = this.$refs.menu.getHalfCheckedKeys();
      console.log("获取到的父节点", parentIds);
      if (parentIds) {
        for (var parenetId of parentIds) {
          // 添加父节点
          console.log("遍历父节点" + parenetId);
          this.menuParams.menuIds.push(parenetId);
        }
      }

      chageMenu(this.menuParams).then((res) => {
        if (res.code == 200) {
          this.MenuChangeVisible = false;
          this.checkMenu = this.menuParams.menuIds;
          console.log("选中的菜单" + this.checkMenu);
          this.init();
        }
      });
    },

    // 修改角色权限
    changePerm() {
      // 获取子节点
      this.permParams.permIds = this.$refs.perm.getCheckedKeys(true);

      //
      chageRoleResource(this.permParams).then((res) => {
        if (res.code == 200) {
          this.PermChangeVisible = false;
          this.checkPerm = this.permParams.permIds;
          //刷新数据
          this.init();
        }
      });
    },
  },
};
</script>

<style>
</style>
